/* 页码匹配显示 翻页 */

/* 
import PDFViewer from '@/components/pdfComponent/pdfWorker'

  const highlightText = '帝国主义' // 高亮的文字
  // const file = 'https://www.w3.or/g/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf'
  const file = '/public/pdfColge.pdf'
  const pageNumber = 3 // 跳转到第二页
 <div style={{ width: '100vw', height: '100%' }}>
   <PDFViewer file={file} initialPageNumber={pageNumber} highlightText={highlightText} />
 </div>
*/
import { useState } from 'react'
import { Document, Page, pdfjs } from 'react-pdf'
import 'react-pdf/dist/esm/Page/AnnotationLayer.css'
import 'react-pdf/dist/esm/Page/TextLayer.css' // 引入默认的文本层样式
import './pdfWorker.less'
pdfjs.GlobalWorkerOptions.workerSrc = '/public/pdf.worker.min.mjs'

const PDFViewer = ({ file, initialPageNumber }) => {
  const [numPages, setNumPages] = useState(null)
  const [pageNumber, setPageNumber] = useState(initialPageNumber)

  const onDocumentLoadSuccess = ({ numPages }) => {
    setNumPages(numPages)
  }

  const handlePreviousPage = () => {
    if (pageNumber > 1) {
      setPageNumber(pageNumber - 1)
    }
  }

  const handleNextPage = () => {
    if (pageNumber < numPages) {
      setPageNumber(pageNumber + 1)
    }
  }

  return (
    <div style={{ width: '100%', height: '100%', position: 'relative' }}>
      <Document
        file={file}
        onLoadSuccess={onDocumentLoadSuccess}
        onLoadError={console.error}
        loading="加载中..."
        className="pdfCom_Docu"
      >
        <Page pageNumber={pageNumber} className="pdfCom_Docu_page" />
      </Document>
      <div className="pdfCom_handPage flexRow">
        <button onClick={handlePreviousPage} disabled={pageNumber <= 1}>
          上一页
        </button>
        <span style={{ margin: '0 10px' }}>
          {pageNumber} / {numPages}
        </span>
        <button onClick={handleNextPage} disabled={pageNumber >= numPages}>
          下一页
        </button>
      </div>
    </div>
  )
}
export default PDFViewer

/* 文字权重加亮 有bug canvas显示重叠 页码匹配还没显示 */
// import { useEffect, useRef, useState } from 'react'
// import { pdfjs } from 'react-pdf'
// import 'react-pdf/dist/esm/Page/AnnotationLayer.css'
// import 'react-pdf/dist/esm/Page/TextLayer.css' // 引入默认的文本层样式
// import './pdfWorker.less'

// pdfjs.GlobalWorkerOptions.workerSrc = '/public/pdf.worker.min.mjs'

// const PDFViewer = ({ file, initialPageNumber, highlightText }) => {
//   const [numPages, setNumPages] = useState(null)
//   const [pageNumber, setPageNumber] = useState(initialPageNumber)
//   const canvasRef = useRef(null)
//   const parentRef = useRef(null)

//   const onDocumentLoadSuccess = ({ numPages }) => {
//     setNumPages(numPages)
//   }

//   const handlePreviousPage = () => {
//     if (pageNumber > 1) {
//       setPageNumber(pageNumber - 1)
//     }
//   }

//   const handleNextPage = () => {
//     if (pageNumber < numPages) {
//       setPageNumber(pageNumber + 1)
//     }
//   }

//   const renderPage = async (pdf, pageNumber) => {
//     const page = await pdf.getPage(pageNumber)
//     const viewport = page.getViewport({ scale: 1 }) // 初始缩放比例为1

//     const canvas = canvasRef.current
//     const context = canvas.getContext('2d')

//     // 获取父级元素的宽度和高度
//     const containerWidth = parentRef.current.clientWidth
//     const containerHeight = parentRef.current.clientHeight

//     // 计算合适的缩放比例
//     const scale = Math.min(containerWidth / viewport.width, containerHeight / viewport.height)

//     const scaledViewport = page.getViewport({ scale })

//     canvas.height = containerHeight
//     canvas.width = containerWidth

//     // 清除画布
//     context.clearRect(0, 0, canvas.width, canvas.height)

//     const renderContext = {
//       canvasContext: context,
//       viewport: scaledViewport
//     }

//     await page.render(renderContext)

//     // 确保文本绘制在正确的区域
//     const textContent = await page.getTextContent()
//     drawText(context, textContent, scaledViewport, highlightText, scale)
//   }

//   const drawText = (context, textContent, viewport, highlightText, scale) => {
//     context.font = `6px Arial` // 调整字体大小
//     context.fillStyle = 'black'

//     textContent.items.forEach(item => {
//       const { str, transform } = item
//       const x = transform[4] * scale
//       const y = transform[5] * scale
//       const charWidth = context.measureText(str).width * scale

//       if (highlightText && str.includes(highlightText)) {
//         context.save()
//         context.fillStyle = 'yellow'
//         context.fillRect(x, y - 6 * scale, charWidth, 6 * scale) // 高亮背景
//         context.restore()
//       }

//       context.fillText(str, x, y)
//     })
//   }

//   useEffect(() => {
//     const loadPDF = async () => {
//       const loadingTask = pdfjs.getDocument(file)
//       const pdf = await loadingTask.promise
//       renderPage(pdf, pageNumber)
//     }

//     if (file) {
//       loadPDF()
//     }
//   }, [file, pageNumber, highlightText])

//   // 确保在组件卸载时清理资源
//   useEffect(() => {
//     return () => {
//       if (canvasRef.current) {
//         const context = canvasRef.current.getContext('2d')
//         context.clearRect(0, 0, canvasRef.current.width, canvasRef.current.height)
//       }
//     }
//   }, [])

//   return (
//     <div style={{ width: '100%', height: '100%', position: 'relative' }}>
//       <div className="pdfCom_Docu" ref={parentRef}>
//         <canvas ref={canvasRef} style={{ width: '100%', height: '100%' }}></canvas>
//       </div>
//       <div className="pdfCom_handPage flexRow">
//         <button onClick={handlePreviousPage} disabled={pageNumber <= 1}>
//           上一页
//         </button>
//         <span style={{ margin: '0 10px' }}>
//           {pageNumber} / {numPages}
//         </span>
//         <button onClick={handleNextPage} disabled={pageNumber >= numPages}>
//           下一页
//         </button>
//       </div>
//     </div>
//   )
// }

// export default PDFViewer
